:root {
    --adm-color-primary: tomato;
}

.amap-example {
    width: 100vw;
    max-height: 60vh;
    overflow: auto;
    margin-bottom: 10px;
    // color: tomato;
    position: relative;
    scroll-behavior: smooth;
}

.searchExample {
    width: 100vw;
    max-height: 40vh;
    overflow: auto;
    margin-bottom: 10px;
    padding: 20px;
}

.adm-capsule-tabs-header {
    padding: 0;
}

.capsule-tabs {
    margin: 5px 0;
    background: #00000000;
}

.search-map-bottom {
    margin: 20px 10px;

    .adm-search-bar-input-box {
        border-radius: 50px;
        height: 50px;
    }
}

.search-map-start,
.search-map-end {
    width: 90%;
    margin: 20px 0;
    line-height: 40px;
}

.audio-btn-play-start {
    width: 90%;
    border-radius: 10px;
    background: tomato;
    color: #fff;
    line-height: 30px;
}

.search-map-btn {
    width: 90%;
    border-radius: 10px;
    color: #000;
    line-height: 30px;
}

.adm-mask-content {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.overlayContent {
    margin: auto;
    width: 90vw;
    min-height: 150px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
}

.overlayContent-yes {
    background: tomato;
    color: #fff;
}

.overlayContent-btn {
    margin: 10px 0;
}

.overlayContent-btn-close {
    position: fixed;
    background: #fff;
    box-shadow: 2px 2px 3px #ccc,
        -2px -2px 3px #ccc,
        -2px -2px 3px #ccc,
        2px 2px 3px #ccc;
    z-index: 99;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    right: 10px;
    bottom: 50px;
}

.overlayContent-btn-none {
    position: relative;
    left: 0;
    top: 0;
}

.searchExample-Jump {
    position: fixed;
    right: 10px;
    bottom: 250px;
    width: 4rem;
    height: 4rem;
    background: tomato;
    opacity: 0.7;
    box-shadow: 2px 2px 3px #ccc,
        -2px -2px 3px #ccc,
        -2px -2px 3px #ccc,
        2px 2px 3px #ccc;
    border-radius: 50%;
    z-index: 9999;
    transform: scale(0);
    text-align: center;
    line-height: 4rem;
}

#mapContainer {
    height: 79vh;
}
.driver-all{
    overflow: auto;
}
.driver-all #mapContainer {
    max-height: 65vh;
}

.driver-all .home-all {
    display: none;
}

.driver-list {
    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 10px;
    }

    display: flex;

    .driver-list-text {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 100%;
        }
    }

    li {
        list-style: none;
        line-height: 30px;
    }

    .driver-list-text-num {
        margin-left: auto;
        display: flex;
        flex-wrap: wrap;

        li {
            list-style: none;
            width: 100%;
            text-align: right;
        }
    }
}

.driver-list-text-error {
    display: flex;
    height: 80px;
    &>div {
        background: tomato;
        opacity: 0.8;
        width: 4rem;
        height: 4rem;
        text-align: center;
        line-height: 4rem;
        border-radius: 50%;
        color: #fff;
        font-size: 2rem;
        margin: auto;
    }
}

.driver-list-text-title {
    display: flex;

    p {
        margin-left: auto;
        line-height: 30px;
    }
}

.driver-list-text-driver {
    .driver-list-text-start {
        margin-bottom: 10px;
        display: flex;
        line-height: 4rem;
        &>div:nth-child(1) {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background: yellow;
            opacity: 0.7;
            font-size: 2rem;
            line-height: 4rem;
            text-align: center;
            margin-right: 10px;
        }
        &>div:nth-child(3){
            margin-left: auto;
        }
    }

    .driver-list-text-end {
        
        display: flex;
        line-height: 4rem;
        &>div:nth-child(1) {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background: yellow;
            opacity: 0.7;
            font-size: 2rem;
            line-height: 4rem;
            text-align: center;
            margin-right: 10px;
        }
        &>div:nth-child(3){
            margin-left: auto;
        }
    }
}
.overlayContent-driver {
    margin: auto;
    width: 90vw;
    min-height: 150px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .overlayContent-driver-img{
        background: rgba(255, 200, 0, 1);
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        margin-right: 10px;
        line-height: 8rem;
        text-align: center;
        font-size: 3rem;
        margin: auto;
    }
    .overlayContent-driver-text{
        width: 100%;
        h3{
            text-align: center;
            transform: scale(1.5);
        }
    }
    .overlayContent-driver-btn{
        width: 100%;
        margin: 20px 0;
        .payment-btn{
            background: rgba(255, 200, 0, 1);
            border-radius: 100px;
            color: #fff;
            font-weight: 800;
            margin-bottom: 10px;
        }
        .payment-btn-cancel{
            border-radius: 100px;
            font-weight: 800;
        }
    }
}
.driver-outline{
    position: fixed;
    font-size: 30px;
    top: 20px;
    left: 20px;
    z-index: 99;
    color: #000;
}